<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音链接跳转</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
            color: #333;
            transition: background-color 0.3s ease, color 0.3s ease;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        }

        h1 {
            margin-bottom: 20px;
        }

        #inputText {
            width: 600px;
            height: 150px;
            font-size: 16px;
            padding: 15px;
            margin-bottom: 20px;
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            resize: vertical;
            overflow-wrap: break-word;
            outline: none;
            transition: box-shadow 0.3s ease;
            font-family: inherit;
        }

        #inputText:focus {
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin: 0 5px;
        }

        button:hover {
            background-color: #0056b3;
        }

        #modeToggle {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            align-items: center;
        }

        #modeToggle img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        body.dark-mode {
            background-color: #333;
            color: #f4f4f9;
        }

        body.dark-mode #inputText {
            background-color: #444;
            color: #f4f4f9;
            box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
        }

        body.dark-mode #inputText:focus {
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.6);
        }

        body.dark-mode button {
            background-color: #555;
        }

        body.dark-mode button:hover {
            background-color: #666;
        }

        #copyright {
            position: absolute;
            bottom: 10px;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <button id="modeToggle" onclick="toggleMode()">
        <img id="modeIcon" src="https://dummyimage.com/20x20/000/fff&text=D" alt="Dark Mode">
        黑暗模式
    </button>
    <h1>抖音链接跳转</h1>
    <textarea id="inputText" placeholder="粘贴从微信复制的内容"></textarea>
    <button onclick="clearInput()">清空内容</button>
    <div id="copyright">
        &copy; 2025 路边同学. 保留所有权利.
    </div>

    <script>
        function toggleMode() {
            const body = document.body;
            const modeToggle = document.getElementById('modeToggle');
            const modeIcon = document.getElementById('modeIcon');
            if (body.classList.contains('dark-mode')) {
                body.classList.remove('dark-mode');
                modeToggle.textContent = ' 黑暗模式';
                modeIcon.src = 'https://dummyimage.com/20x20/000/fff&text=D';
            } else {
                body.classList.add('dark-mode');
                modeToggle.textContent = ' 明亮模式';
                modeIcon.src = 'https://dummyimage.com/20x20/fff/000&text=L';
            }
        }

        document.getElementById('inputText').addEventListener('click', async () => {
            try {
                const clipboardText = await navigator.clipboard.readText();
                document.getElementById('inputText').value = clipboardText;
                const urlRegex = /(https?:\/\/[^\s]+)/;
                const match = clipboardText.match(urlRegex);
                if (match) {
                    const url = match[0];
                    window.open(url, '_blank');
                } else {
                    alert('未找到有效的URL，请检查输入内容。');
                }
            } catch (err) {
                console.error('Failed to read clipboard contents: ', err);
            }
        });

        function clearInput() {
            document.getElementById('inputText').value = '';
        }
    </script>
</body>

</html>    